<template>
    <div class="view">
        <android-nav-bar title="我的粉丝" v-on:back="back"></android-nav-bar>
        <div class="box">
            <div class="all-top">
                <div class="total flex">
                    <div class="people-total">
                        <p class="tip">总人数</p>
                        <p class="num">{{allPeopleNum}}人</p>
                    </div>
                    <div class="income-total">
                        <p class="tip">累计佣金</p>
                        <p class="num">￥{{amount}}</p>
                    </div>
                </div>
            </div>
            <div class="all-bottom">
                <div class="content-box">
                    <cube-tab-bar v-model="selectedLabel"
                                  show-slider
                                  :use-transition="false"
                                  ref="tabNav"
                                  :data="tabs">
                    </cube-tab-bar>
                    <div class="tab-slide-container">
                        <cube-slide
                                ref="slide"
                                :loop="false"
                                :initial-index="initialIndex"
                                :auto-play="false"
                                :show-dots="false"
                                :options="slideOptions"
                                @change="changePage"
                                @scroll="scroll"
                        >
                            <!-- 关注 -->
                            <cube-slide-item>
                                <div class="none-fans" v-if="!fansFirst.length">
                                    暂无粉丝!
                                </div>
                                <cube-scroll class="scroll" ref="scroll1" v-if="fansFirst.length"
                                             :data="fansFirst"
                                             :options="scrollOptions"
                                             @pulling-down="onPullingDown"
                                             @pulling-up="onPullingUp">
                                    <ul class="list-wrapper">
                                        <li v-for="(item, index) in fansFirst" class="list-item flex" :key="index">
                                            <img class="avatar" :src="item.avatar_id&&item.avatar&&item.avatar.file_status.status?item.avatar.file_path+'?imageView2/0/w/80':filePath">
                                            <div class="info">
                                                <div class="nickname ellipsis">{{item.nickName}}</div>
                                                <div class="rank">{{item.rank_name}}</div>
                                                <div class="rank">{{item.phone}}</div>
                                            </div>
                                        </li>
                                    </ul>
                                </cube-scroll>
                            </cube-slide-item>
                            <!-- 推荐 -->
                            <cube-slide-item>
                                <div class="none-fans" v-if="!fansSecond.length">
                                    暂无粉丝!
                                </div>
                                <cube-scroll class="scroll" ref="scroll2" v-if="fansSecond.length"
                                             :data="fansSecond"
                                             :options="scrollOptions"
                                             @pulling-down="onPullingDown"
                                             @pulling-up="onPullingUp">
                                    <ul class="list-wrapper">
                                        <li v-for="(item, index) in fansSecond" class="list-item flex" :key="index">
                                            <img class="avatar" :src="item.avatar_id&&item.avatar&&item.avatar.file_status.status?item.avatar.file_path+'?imageView2/0/w/80':filePath">
                                            <div class="info">
                                                <div class="nickname ellipsis">{{item.nickName}}</div>
                                                <div class="rank">{{item.rank_name}}</div>
                                                <div class="rank">{{item.phone}}</div>
                                            </div>
                                        </li>
                                    </ul>
                                </cube-scroll>
                            </cube-slide-item>
                        </cube-slide>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CommonUnit from "@/unit/CommonUnit";
    import {updateUser} from "@/store/dispatches";
    import UserEntity from "@/entity/UserEntity";
    import AndroidNavBar from "@/components/aui/AndroidNavBar.vue";

    @Component({
        components: {
            AndroidNavBar
        }
    })
    export default class MineFans extends Scene {
        private publicPath: string = process.env.BASE_URL;
        private filePath: string = require("@/assets/images/user-no-face.jpg");
        @State("UserStore")
        public user!: InterfaceUser;
        private selectedLabel: string = "一级";
        private fansFirst: any[] = [];
        private fansSecond: any[] = [];
        private allPeopleNum: number = 0;
        private amount: number = 0;
        private pageOne: number = 1;
        private pageTwo: number = 1;
        private interfaceOne: string = "";
        private interfaceTwo: string = "";

        private get tabs(): Array<any> {
            return [
                {
                    label: "一级"
                },
                {
                    label: "二级"
                }
            ];
        }

        private get slideOptions(): any {
            return {
                listenScroll: true,
                probeType: 3,
                /* lock y-direction when scrolling horizontally and  vertically at the same time */
                directionLockThreshold: 0
            };
        }

        private get scrollOptions(): any {
            return {
                /* lock x-direction when scrolling horizontally and  vertically at the same time */
                directionLockThreshold: 0,
                pullDownRefresh: {txt: "更新成功"},
                pullUpLoad: {
                    threshold: 0,
                    txt: {more: "", noMore: "没有更多数据了..."},
                    visible: true
                },
                scrollbar: true
            };
        }

        private findIndex(ary: Array<object>, fn: any): number {
            if (ary.findIndex) {
                return ary.findIndex(fn);
            }
            let index = -1;
            ary.some((item: Object, i: any, ary: Array<object>) => {
                const ret = fn.call(this, item, i, ary);
                if (ret) {
                    index = i;
                    return ret;
                }
            });
            return index;
        }

        private get initialIndex(): number {//cube-slide资料，匹配，动态滑动
            let index = 0;
            index = this.findIndex(this.tabs, (item: any) => item.label === this.selectedLabel);
            return index;
        }

        private changePage(current: number) {
            this.selectedLabel = this.tabs[current].label;
            // if (current == 1 && !this.fansSecond.length) {
            //     let loadToast = (<any> this).$createToast({
            //         time: 0,
            //         type: "loading",
            //         mask: true,
            //         txt: "加载中..."
            //     }).show();
            //     Http.get(this.interfaceTwo, {page: this.pageTwo, size: 10}, {token: this.user.token}).then((res) => {
            //         if (res.code == 1) {
            //             loadToast.hide();
            //             this.pageTwo++;
            //             this.fansSecond = res.data.list.data;
            //         } else {
            //             loadToast.hide();
            //             this.globalSingleResultToast(res);
            //         }
            //     }).catch((res) => {
            //         loadToast.hide();
            //         console.log(res);
            //         (<any> this).$createToast({
            //             time: 2500,
            //             type: "error",
            //             txt: "网络繁忙,暂无信息!",
            //             mask: true,
            //             onTimeout: () => {
            //                 this.navigateBack();
            //             }
            //         }).show();
            //     });
            // }
        }

        private scroll(pos: any) {
            const x = Math.abs(pos.x);
            const tabItemWidth = (this as any).$refs.tabNav.$el.clientWidth;
            const slideScrollerWidth = (this as any).$refs.slide.slide.scrollerWidth;
            const deltaX = x / slideScrollerWidth * tabItemWidth;
            (this as any).$refs.tabNav.setSliderTransform(deltaX);
        }

        private onPullingDown(): void {
            let scrollName = "";
            if (this.selectedLabel == "一级") {
                scrollName = "scroll1";
            } else {
                scrollName = "scroll2";
            }
            (this as any).$refs[scrollName].forceUpdate();
        }

        private onPullingUp(): void {
            let inter = "";
            let page = 2;
            let scrollName = "";
            if (this.selectedLabel == "一级") {
                inter = this.interfaceOne;
                page = this.pageOne;
                scrollName = "scroll1";
            } else {
                inter = this.interfaceTwo;
                page = this.pageTwo;
                scrollName = "scroll2";
            }
            Http.get(inter, {page: page, size: 10}, {token: this.user.token}).then((res) => {
                if (res.code == 1) {
                    if (res.data.list.data !== []) {
                        if (this.selectedLabel == "一级") {
                            this.fansFirst = this.fansFirst.concat(res.data.list.data);
                            this.pageOne++;
                        } else {
                            this.fansSecond = this.fansSecond.concat(res.data.list.data);
                            this.pageTwo++;
                        }
                        this.$nextTick(() => {
                            (this as any).$refs[scrollName].refresh();
                            (this as any).$refs[scrollName].forceUpdate();
                        });
                    } else if (res.data.list.data == []) {
                        (this as any).$refs[scrollName].forceUpdate();
                    }
                }
            });
        }

        private back(): void {
            this.navigateBack();
        }

        private toPage(name: string, query: any = {}): any {
            this.navigateTo({
                name: name,
                query: query
            });
        }

        private async getFans():Promise<any>{
            let loadToast = (<any> this).$createToast({
                time: 0,
                type: "loading",
                mask: true,
                txt: "加载中..."
            }).show();
            try {
                const first=await Http.get(this.interfaceOne, {page:this.pageOne,size:10}, {token: this.user.token});
                const second=await Http.get(this.interfaceTwo, {page:this.pageTwo,size:10}, {token: this.user.token});
                if(first.code==1 && second.code==1){
                    loadToast.hide();
                    this.fansFirst=first.data.list.data;
                    this.fansSecond=second.data.list.data;
                    this.allPeopleNum=first.data.team_count;
                    this.amount=first.data.distribut_money;
                    this.pageOne++;
                    this.pageTwo++;
                }else{
                    loadToast.hide();
                    this.globalMultipleResultToast(first,second);
                }
            }catch (e) {
                loadToast.hide();
                console.log(e);
                (<any> this).$createToast({
                    time: 2500,
                    type: "error",
                    txt: "网络繁忙,暂无信息!",
                    mask: true,
                    onTimeout: () => {
                        this.navigateBack();
                    }
                }).show();
            }
        }

        private mounted(): void {
            this.interfaceOne = this.user.type == 1 ? this.api["getUserFansOne"] : this.api["getMatchmakerFansOne"];
            this.interfaceTwo = this.user.type == 1 ? this.api["getUserFansTwo"] : this.api["getMatchmakerFansTwo"];
            this.getFans();
            // let loadToast = (<any> this).$createToast({
            //     time: 0,
            //     type: "loading",
            //     mask: true,
            //     txt: "加载中..."
            // }).show();
            // Http.get(this.interfaceOne, {page: this.pageOne, size: 10}, {token: this.user.token}).then((res) => {
            //     if (res.code == 1) {
            //         loadToast.hide();
            //         this.pageOne++;
            //         this.fansFirst = res.data.list.data;
            //         this.allPeopleNum = res.data.team_count;
            //         this.amount = res.data.distribut_money;
            //     } else {
            //         loadToast.hide();
            //         this.globalSingleResultToast(res);
            //     }
            // }).catch((res) => {
            //     loadToast.hide();
            //     console.log(res);
            //     (<any> this).$createToast({
            //         time: 2500,
            //         type: "error",
            //         txt: "网络繁忙,暂无信息!",
            //         mask: true,
            //         onTimeout: () => {
            //             this.navigateBack();
            //         }
            //     }).show();
            // });
        }

    }
</script>

<style scoped lang="stylus">
    .view
        position relative;
        width 100vw;
        height 100vh;
        background $theme-page-common-background-color;
        overflow hidden;


        .box
            margin-top calc(var(--safe-area-inset-top) + 47px);
            height calc(100vh - var(--safe-area-inset-top) - 47px);

            &::before
                display table;
                content '';

            .all-top
                background linear-gradient(to right, rgba(254, 124, 79, .6), rgba(255, 89, 163, .6));
                width 100vw;
                height 160px;

                &::before
                    display table;
                    content '';

                .total
                    position relative;
                    width 80vw;
                    height 100px;
                    margin 30px auto;
                    background-color #fff;
                    border-radius 300px;
                    align-items center;
                    text-align center;
                    justify-content: center;

                    &::after
                        display block;
                        content '';
                        width 2px;
                        border-left 2px solid $theme-common-color;
                        height 80px;
                        position absolute;
                        top 10px;
                        left calc(50% - 1px);

                    .people-total, .income-total
                        width 50%;

                        .num
                            color $theme-common-color;
                            margin-top 8px;
                            font-size 16px;
                            word-break break-word;

            .all-bottom
                position relative;
                background-color #fff;
                height calc(100vh - 160px - 47px);
                padding-bottom var(--safe-area-inset-bottom);

                .content-box
                    height 100%;

                    .tab-slide-container
                        position: fixed;
                        top: calc(47px + 160px + 45px + var(--safe-area-inset-top));
                        left: 0
                        right: 0
                        bottom: 0

                    >>> .cube-tab-bar
                        background-color #fff;
                        padding 8px 0;
                        border-bottom 1px solid $theme-line-color;

                        .cube-tab-bar-slider
                            z-index 1000;

                    .none-fans
                        padding-top 50px;
                        padding-bottom calc(100vh - 160px - 47px - 44px - 50px - 15px - var(--safe-area-inset-top));
                        text-align center;

                    .scroll
                        height calc(100vh - 44px - 160px - 47px - var(--safe-area-inset-bottom));
                        position relative

                        .list-wrapper
                            .list-item
                                margin 15px;
                                padding-bottom 15px;
                                justify-content: space-around;
                                border-bottom 1px solid $theme-line-color;

                                .avatar
                                    width 70px;
                                    height 70px;
                                    border-radius 50%;

                                .info
                                    width calc(100vw - 100px - 30px);
                                    line-height calc(70px / 3);


</style>
